import { forwardRef, ForwardRefRenderFunction, memo, ReactNode } from 'react';
import type { CSSProperties, FC, PropsWithChildren } from 'react';
import { Affix, PageHeader } from 'antd';

const contentStyle: CSSProperties = {
  height: 'calc(100vh - 121px)',
};

const ProfileContainer: ForwardRefRenderFunction<
  HTMLDivElement,
  PropsWithChildren<{
    style?: CSSProperties;
    title?: string;
    extra?: ReactNode;
  }>
> = ({ extra, title, children, style }, ref) => {
  return (
    <div className={'px-14 py-8'} style={style}>
      <div
        className={'bg-white rounded-3xl relative overflow-auto shadow-lg'}
        style={contentStyle}
        ref={ref}
      >
        <div className={'sticky top-0 bg-white z-10 shadow '}>
          <PageHeader title={title} backIcon={false} extra={extra} />
        </div>
        {children}
      </div>
    </div>
  );
};

const RefProfileContainer = forwardRef(ProfileContainer);

export default memo(RefProfileContainer);
